<template>
    <!-- 文档首页 -->
    <div
        v-if="search == true"
        class="bg-cover w-full 2xl:h-650 lg:h-500 md:h-450 h-264 bg-center flex justify-center items-center flex-col overflow-hidden"
        :style="'background-image:url(' + image + ')'"
    >
        <div class="lg:text-5xl md:text-4xl text-2xl md:mb-14 mb-5 text-white">{{ title }}</div>

        <SearchBar :placeHolder="placeHolder" />
        <div class="xl:mb-20 lg:mb-32"></div>
    </div>
    <!-- 主题首页 -->
    <div
        v-else
        class="bg-cover w-full lg:h-500 md:h-300 h-36 bg-center overflow-hidden flex justify-center"
        :style="'background-image:url(' + image + ')'"
    >
        <div class="w-3/5 h-full flex md:block justify-center items-center">
            <div
                class="topicTitle lg:text-5xl md:text-4xl text-2xl md:mt-32 md:ml-32 flex justify-center items-center md:block text-white tracking-widest"
            >{{ title }}</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import SearchBar from "./smallComs/searchBar.vue";
import { defineProps } from "vue";
defineProps([
    'search',
    'image',
    'title',
    'placeHolder'
])

</script>

<style scoped>
input::placeholder {
    color: gray;
    font-weight: 300;
}
.topicTitle {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}
</style>

